<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>基于layui的notice通知控件</title>
    <link rel="stylesheet" href="https://layui.hcwl520.com.cn/layui/css/layui.css">
    <link rel="stylesheet" href="./../dist/notice.css">
</head>

<body>
    <div class="layui-container">



        <div class="layui-card">
            <div class="layui-card-header">

                1.此控件是基于layui的notice通知控件，可用于美化消息通知
                2.控件支持响应式
            </div>
            <div class="layui-card-body">

                <blockquote class="layui-elem-quote layui-quote-nm">基础样式</blockquote>

                <div class="notice layui-bg-blue layui-notice">
                    <p>
                        <i class="layui-icon layui-icon-face-smile"></i>
                        带图标，静态通用
                        <a href="javascript:;" class="pull-right notice-close"> <i class="layui-icon layui-icon-close"></i></a>
                    </p>
                </div>
                <div class="notice layui-bg-cyan layui-notice">
                    <p class="text-center">
                        居中的，这种可以用作通栏通知
                        <a href="javascript:;" class="pull-right notice-close"> <i class="layui-icon layui-icon-close"></i></a>
                    </p>
                </div>
                <br>
                <hr class="layui-bg-blue">
                <blockquote class="layui-elem-quote layui-quote-nm">API</blockquote>
                <button class="layui-btn" id="create1">生成notice</button>
<pre class="layui-code">
//使用说明
layui.use(['notice'], function () {

    // 全部参数都是可选参数
    var notice = {
        type: "",
        calssName: "",
        title: "创建普通notice通知",
        icon: "",
        align: "",
        autoClose: true,
        time: 3000,
        click: true,  
        desktop: true, // 开启桌面提醒    
        end: function (){ 

        }
    };
    notice.init(notice);
});
</pre>
                <br>
                <hr class="layui-bg-blue">

                <button class="layui-btn" id="closeAll">移除全部</button>
<pre class="layui-code">
// 关闭全部
notice.closeAll();
</pre>
            </div>
        </div>
        <br>
    </div>
</body>
<script src="https://layui.hcwl520.com.cn/layui/layui.js"></script>
<script>
    layui.config({
        base: './../dist/'
    }).extend({
        notice: 'notice'
    });

    //layui模块的定义
    layui.use(['notice', 'jquery', 'layer'], function () {
        var notice = layui.notice;
        var layer = layui.layer;
        var $ = layui.jquery;

        $("#create1").click(function () {
            notice.init({
                type: "default",
                autoClose: true,
                title: "创建普通notice通知"
            });
        });


        $("#closeAll").click(function () {
            layer.msg('移除全部notice通知');
            notice.closeAll();
        });


        window.setTimeout(function () {
            notice.init({
                type: "warm",
                // desktop: true,
                title: "基于layui的notice通知控件,我不会自动消失"
            });
            // notice.init({
            //     type: "custom",
            //     icon: "layui-icon-release",
            //     title: "带图标，基于layui的notice通知控件,我会自动消失，没有关闭按钮"
            // });
        }, 3500);

        // window.setTimeout(function () {
        //     notice.init({
        //         type: "custom",
        //         align: "left",
        //         calssName: "layui-bg-green",
        //         icon: "layui-icon-vercode",
        //         title: "验证成功，正在提交"
        //     });
        // }, 2000);


        // notice.init({
        //     align: "left",
        //     type: "danger",
        //     title: "基于layui的notice通知控件3，删除常用"
        // });

        // notice.init({
        //     type: "custom",
        //     calssName: "layui-bg-grey",
        //     title: "基于layui的notice通知控件4，自定义样式"
        // });
    });
</script>

</html>